<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>吃什么</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <% include include/head.ejs %>
        <link rel="stylesheet" href="./stylesheets/mycss.css" >
    </head>
    <body>
        <div class="weui-tab">
            <div class="weui-tab__bd">
                <div class="weui-tab__bd-item weui-tab__bd-item--active">
                    <!-- 幻灯片  -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="./images/1.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./images/2.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./images/3.jpg" alt=""></div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>

                    <!--  每日推荐  -->
                    <div class="weui-cells__title">每日推荐</div>
                    <div class="row">
                        <div class="col-xs-4">
                            <div class="thumbnail">
                                <img src="./images/miantiao.jpg" alt="...">
                                <div class="caption">
                                    <h5>面条</h5>
                                    <h6 class="font-row-3">面条是一种制作简单，食用方便，营养丰富，即可主食又可快餐的健康食品</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-4">
                            <div class="thumbnail">
                                <img src="./images/shengnvguo.jpg" alt="...">
                                <div class="caption">
                                    <h5>圣女果</h5>
                                    <h6 class="font-row-3">常被称为小西红柿,具有生津止渴、健胃消食、清热解毒、凉血平肝，补血养血和增进食欲的功效。</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-4">
                            <div class="thumbnail">
                                <img src="./images/shengnvguo.jpg" alt="...">
                                <div class="caption">
                                    <h5>圣女果</h5>
                                    <h6 class="font-row-3">常被称为小西红柿,具有生津止渴、健胃消食、清热解毒、凉血平肝，补血养血和增进食欲的功效。</h6>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--  网友分享  -->
                    <div class="weui-cells__title">网友分享</div>
                    <div class="card demo-card-header-pic">
                        <div valign="bottom" class="card-header color-white no-border no-padding">
                            <img class='card-cover' src="./images/t1.jpg" alt="">
                        </div>
                        <div class="card-content">
                            <div class="card-content-inner">
                            <p class="color-gray"><img class="img-circle" src="./images/user1.jpg"> 陈小郎 发表于 2017/12/6</p>
                            <p>超级营养早餐,一天能量满满!!!</p>
                            </div>
                        </div>
                        <div class="card-footer">
                            <a href="#" class="link"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></a>
                            <a href="#" class="link"><span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></a>
                            <a href="#" class="link"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></a>
                        </div>
                    </div>
                    <div class="card demo-card-header-pic">
                        <div valign="bottom" class="card-header color-white no-border no-padding">
                            <img class='card-cover' src="./images/t1.jpg" alt="">
                        </div>
                        <div class="card-content">
                            <div class="card-content-inner">
                            <p class="color-gray"><img class="img-circle" src="./images/user1.jpg"> 陈小郎 发表于 2017/12/6</p>
                            <p>超级营养早餐,一天能量满满!!!</p>
                            </div>
                        </div>
                        <div class="card-footer">
                            <a href="#" class="link"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></a>
                            <a href="#" class="link"><span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></a>
                            <a href="#" class="link"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></a>
                        </div>
                    </div>
                    <div class="card demo-card-header-pic">
                        <!-- <div valign="bottom" class="card-header color-white no-border no-padding">
                            <img class='card-cover' src="./images/t1.jpg" alt="">
                        </div> -->
                        <div class="card-content">
                            <div class="card-content-inner">
                            <p class="color-gray"><img class="img-circle" src="./images/user1.jpg"> 陈小郎 发表于 2017/12/6</p>
                            <p>超级营养早餐,一天能量满满!!!</p>
                            </div>
                        </div>
                        <div class="card-footer">
                            <a href="#" class="link"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></a>
                            <a href="#" class="link"><span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></a>
                            <a href="#" class="link"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></a>
                        </div>
                    </div>
                    <div class="clear-60"></div>
                </div>
            </div>
            <% include include/nav.ejs %>
        </div>
        <% include include/head-js.ejs %>
        <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.min.js"></script>
        <script>
            $(".swiper-container").swiper({
                loop: true,
                autoplay: 3000
            })
        </script>
    </body>
</html>